<md-list>

    <!-- ADD NEW MEMBER -->
    <md-subheader class="md-no-sticky">Add New Member</md-subheader>

    <md-list-item class="add-new-member">
        <form ng-submit="vm.newMember()" layout="row" layout-align="start center">
            <input flex placeholder="Type Member Name" type="text" ng-model="vm.newMemberSearchInput">
            <md-button type="submit" class="md-accent md-raised" aria-label="Add New Member">Add</md-button>
        </form>
    </md-list-item>
    <!-- / ADD NEW MEMBER -->

    <md-divider></md-divider>

    <!-- MEMBERS -->
    <md-list-item class="member" ng-repeat="member in vm.board.members">
        <img alt="{{ member.name }}" ng-src="{{ member.avatar }}" class="md-avatar"/>
        <p class="member-name">{{ member.name }}</p>
        <md-button ng-click="vm.removeMember($event, member.id);"
                   class="remove-button md-icon-button" aria-label="remove">
            <md-icon md-font-icon="icon-delete"></md-icon>
        </md-button>
    </md-list-item>
    <!-- / MEMBERS -->

</md-list>